<template>
    <div class="add">
    <input type="text" v-model="title" placeholder="按下回车提交" @keyup.enter="onSubmit">
    </div>
</template>

<script setup>
    import {ref} from "vue"
    import useTodo from '../composables/useTodo.js'
    const title = ref('');
    const onSubmit = () => {
        useTodo().add({title: title.value});
        title.value = '';
    }
</script>

<style lang="scss" scoped>
    .add{
        display:flex;
        input{
            outline:none;
            border: 1px solid #16a085;
            padding:10px;
            flex: 1;
        }
    }
</style>